<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import { queryTeamList, submitAuditApi, teamDelete } from '@/api/team'
	import { useStore } from 'vuex';
	import { getCertificationInfo, queryUserRole } from '@/api/user';
import { msg } from '@/utils/tools';
import { onShow } from '@dcloudio/uni-app';
	const store = useStore();
	const paging = ref()
	const dataList = ref([])

	const userRole = ref("");


	onMounted(() => {
		queryUserRole().then(res => {
			userRole.value = res.data;
		})
		
	})
	onShow(() => {
		paging.value?.reload();
	})

	const showCreate = computed(() => {
		return userRole.value.userTypeEnum == 1 || userRole.value.userTypeEnum == 2;
	})

	const isMine = (openId) => {
		return store.state.user.openId == openId;
	}

	const loadFun = (pageNum : number, pageSize : number) => {
		queryTeamList({ pageNum, pageSize, openid: store.state.user.openId }).then(res => {
			if (res.code == 200) {
				paging.value.complete(res.data.data)
			} else {
				paging.value.complete([])
			}
		}).catch(err => {
			paging.value.complete(false)
		})
	}

	const translateStatus = (status) => {
		switch (status) {
			case "NOT_APPLIED_FOR":
				return "待提交";
			case "UNDER_REVIEW":
				return "审核中";
			case "APPROVED_BY_REVIEW":
				return "审核通过";
			case "REVIEW_FAILED":
				return "审核未通过";
			default:
				return "未知类型";
		}
	}

	const createTeam = () => {
		getCertificationInfo({ openid: store.state.user.openId }).then(res => {
			if (res.code == 200 && res.data) {
				uni.navigateTo({ url: "/pages/createTeam/createTeam" });
			} else {
				uni.showModal({
					content: '您还未实名认证，请实名认证后再进行操作！',
					confirmText: '前往认证',
					confirmColor: '#92C75B',
					cancelText: '再看看',
					cancelColor: '#929292'
				}).then(async res => {
					if (res.confirm) {
						uni.navigateTo({ url: '/pages/certification/certification' })
					}
				})
			}
		})

	}

	const goDetail = (data) => {
		uni.navigateTo({
			url: `/pages/teamDetail/teamDetail?teamId=${data.id}`,
		})
	}
	const goEdit = (data) => {
		uni.navigateTo({
			url: `/pages/createTeam/createTeam?teamId=${data.id}`
		})
	}
	const deleteTeam = (data) => {
		uni.showModal({
			title: '温馨提示',
			content: '确认删除球队吗？',
			confirmText: "确认",
			showCancel: true,
			confirmColor: '#92C75B',
			success: (res) => {
				if(res.confirm) {
					teamDelete(data.id).then(res => {
						msg("删除球队成功");
						paging.value.reload()
					})
				}
				
			}
		})
	}
	const submitAudit = (data) => {
		submitAuditApi({ teamId: data.id }).then(res => {
			msg("提交审核成功");
			paging.value.reload();
		})
	}
</script>

<template>


	<z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
		<template #top>
			<xx-title title="球队列表" />
			<view class="banner">
				<view class="title">
					我的球队
				</view>
				<view v-if="showCreate" class="button" @click="createTeam">
					创建球队
				</view>
			</view>

		</template>
		<view class="team-item" v-for="item in dataList" :key="item.id">
			<view class="info">
				<view class="line">
					<view class="label">
						球队名称：
					</view>
					<view class="value">
						{{item.name}}
					</view>
				</view>
				<view class="line">
					<view class="label">
						赛事级别：
					</view>
					<view class="value">
						{{item.gameLevel==1?"市（州）":"县（市区）"}}
					</view>
				</view>
				<view class="line">
					<view class="label">
						球队组别：
					</view>
					<view class="value">
						{{item.groupName}}
					</view>
				</view>
				<view class="line">
					<view class="label">
						赛事名称：
					</view>
					<view class="value">
						{{item.gameName}}
					</view>
				</view>
				<view class="line">
					<view class="label">
						球队报名状态：
					</view>
					<view class="value">
						{{translateStatus(item.examineStatus)}}
					</view>
				</view>
				<view v-if="item.examineStatus=='REVIEW_FAILED'" class="line">
					<view class="label">
						驳回原因：
					</view>
					<view class="value">
						{{item.examineRemark}}
					</view>
				</view>
			</view>
			<view class="toolbar">
				<view class="button primary" type="primary" @click="goDetail(item)">
					详情
				</view>
				<view
					v-if="isMine(item.openid)&&(item.examineStatus!='UNDER_REVIEW'&&item.examineStatus!='APPROVED_BY_REVIEW')"
					class="button default" type="default" @click="goEdit(item)">编辑</view>
				<view
					v-if="isMine(item.openid)&&(item.examineStatus!='UNDER_REVIEW'&&item.examineStatus!='APPROVED_BY_REVIEW')"
					class="button error" type="error" @click="deleteTeam(item)">删除</view>
				<view
					v-if="isMine(item.openid)&&(item.examineStatus == 'NOT_APPLIED_FOR'||item.examineStatus=='REVIEW_FAILED')"
					class="button default" type="default" @click="submitAudit(item)">提交审核
				</view>
			</view>
		</view>
	</z-paging>
</template>

<style scoped lang="scss">
	::v-deep.z-paging-content {
		background: #F5F5F5;
	}

	.banner {
		padding: 20rpx 40rpx;
		margin: 20rpx 30rpx 0rpx;
		border: 6rpx;
		border-radius: 12rpx;
		background-image: linear-gradient(#5BA3A0, #7ABA88);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			color: #ffffff;
			font-size: 48rpx;
			font-weight: 600;
		}

		.button {
			padding: 8rpx 20rpx;
			background-color: #F6BD4C;
			color: #ffffff;
			font-weight: 500;
			font-size: 24rpx;
			border-radius: 6rpx;
		}
	}

	.team-item {
		position: relative;
		background: #FFFFFF;
		margin: 28rpx;
		overflow: hidden;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.01), 0 4px 5px 0 rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

		.info {
			.line {
				padding: 10rpx;
				display: flex;
				align-items: flex-start;

				.label {
					flex: 0 0 auto;
				}

				.value {
					color: #505363;
				}
			}

			padding-bottom: 10rpx;
			border-bottom: 1px solid #aaaaaa;
		}

		.toolbar {
			margin-top: 20rpx;
			padding: 0 20rpx;
			text-align: right;

			.button {
				display: inline-block;
				border-radius: 6rpx;
				color: #ffffff;
				font-weight: bold;
				font-size: 26rpx;
				padding: 10rpx 30rpx;
				box-shadow: 1px 2px #F5F5F5;
				margin-left: 12rpx;

				&.primary {
					background-color: #96C662;
				}

				&.error {
					background-color: #EB3324;
				}

				&.default {
					background-color: #F6BD4C;
				}
			}
		}


	}

</style>